<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="./style.css" rel="stylesheet" />
  </head>

  <body>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3.2.31/dist/vue.esm-browser.js"
        }
      }
    </script>

    <!--
A fully spec-compliant TodoMVC implementation
https://todomvc.com/
-->

    <script type="module">
      import { createApp, ref, computed, watchEffect } from "vue";

      const STORAGE_KEY = "vue-todomvc";

      const filters = {
        all: (todos) => todos,
        active: (todos) => todos.filter((todo) => !todo.completed),
        completed: (todos) => todos.filter((todo) => todo.completed),
      };

      createApp({
        setup() {
          // state
          const todos = ref(JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]"));
          const visibility = ref("all");
          const editedTodo = ref();

          // derived state
          const filteredTodos = computed(() => filters[visibility.value](todos.value));
          const remaining = computed(() => filters.active(todos.value).length);

          // handle routing
          window.addEventListener("hashchange", onHashChange);
          onHashChange();

          // persist state
          watchEffect(() => {
            localStorage.setItem(STORAGE_KEY, JSON.stringify(todos.value));
          });

          function toggleAll(e) {
            todos.value.forEach((todo) => (todo.completed = e.target.checked));
          }

          function addTodo(e) {
            const value = e.target.value.trim();
            if (value) {
              todos.value.push({
                id: Date.now(),
                title: value,
                completed: false,
              });
              e.target.value = "";
            }
          }

          function removeTodo(todo) {
            todos.value.splice(todos.value.indexOf(todo), 1);
          }

          let beforeEditCache = "";
          function editTodo(todo) {
            beforeEditCache = todo.title;
            editedTodo.value = todo;
          }

          function cancelEdit(todo) {
            editedTodo.value = null;
            todo.title = beforeEditCache;
          }

          function doneEdit(todo) {
            if (editedTodo.value) {
              editedTodo.value = null;
              todo.title = todo.title.trim();
              if (!todo.title) removeTodo(todo);
            }
          }

          function removeCompleted() {
            todos.value = filters.active(todos.value);
          }

          function onHashChange() {
            console.log('onHashChange', window.location.hash);
            const route = window.location.hash.replace(/#\/?/, "");
            if (filters[route]) {
              visibility.value = route;
            } else {
              window.location.hash = "";
              visibility.value = "all";
            }
          }

          return {
            todos,
            visibility,
            editedTodo,
            filteredTodos,
            remaining,
            toggleAll,
            addTodo,
            removeTodo,
            editTodo,
            doneEdit,
            cancelEdit,
            removeCompleted,
          };
        },
      }).mount("#app");
    </script>

    <div id="app">
      <section class="todoapp">
        <header class="header">
          <h1>todos</h1>
          <input class="new-todo" autofocus placeholder="What needs to be done?" @keyup.enter="addTodo" />
        </header>
        <section class="main" v-show="todos.length">
          <input id="toggle-all" class="toggle-all" type="checkbox" :checked="remaining === 0" @change="toggleAll" />
          <label for="toggle-all">Mark all as complete</label>
          <ul class="todo-list">
            <li
              v-for="todo in filteredTodos"
              class="todo"
              :key="todo.id"
              :class="{ completed: todo.completed, editing: todo === editedTodo }"
            >
              <div class="view">
                <input class="toggle" type="checkbox" v-model="todo.completed" />
                <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
                <button class="destroy" @click="removeTodo(todo)"></button>
              </div>
              <input
                v-if="todo === editedTodo"
                class="edit"
                type="text"
                v-model="todo.title"
                @vnode-mounted="({ el }) => el.focus()"
                @blur="doneEdit(todo)"
                @keyup.enter="doneEdit(todo)"
                @keyup.escape="cancelEdit(todo)"
              />
            </li>
          </ul>
        </section>
        <footer class="footer" v-show="todos.length">
          <span class="todo-count">
            <strong>{{ remaining }}</strong>
            <span>{{ remaining === 1 ? 'item' : 'items' }} left</span>
          </span>
          <ul class="filters">
            <li>
              <a href="#/all" :class="{ selected: visibility === 'all' }">All</a>
            </li>
            <li>
              <a href="#/active" :class="{ selected: visibility === 'active' }">Active</a>
            </li>
            <li>
              <a href="#/completed" :class="{ selected: visibility === 'completed' }">Completed</a>
            </li>
          </ul>
          <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
            Clear completed
          </button>
        </footer>
      </section>
    </div>
  </body>
</html>
